<template>
  <transition
  name="custom-classes-transition"
  enter-active-class="animated zoomIn"
  leave-active-class="animated zoomOut">
    <div
      :class="[
        'grid-item',
        'grid-x-'+property.attrs.col,
        'grid-y-'+property.attrs.row,
        'grid-w-'+property.attrs.width,
        'grid-h-'+property.attrs.height,
        'grid_padding'
      ]"
      :style="{'z-index':property.attrs.zIndex, border: '1px solid red'}">
      <div class="sti-panel"
        :style="property.panelStyle"
        :class="{'boder-debugger': boderDebugger}">
        <div class="sti-panel_inner">
          <div v-if="property.isHideHead" class="sti-panel_header sti-panel_header_hide">
          </div>
          <div v-else class="sti-panel_header sti-panel_header_show">
            <div class="sti-panel_header_title">
              <span>{{property.title}}</span>
            </div>
          </div>
          <div class="sti-panel_body">
            <component :is="comp" :value="pValue" :dataValue="dataValue" :property="property"></component>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
import './animate.css'
import './style.less'
export default {
  components: {},
  props: {
    property: {
      type: Object,
      default: {}
    },
    dataValue: {
      defautl: null
    },
    boderDebugger: {
      type: Boolean,
      defautl: false
    }
  },
  data() {
    return {
      hideIcon: 0,
      currentComp: this.property.component,
      pValue: {
        'pCfg': this.property
      },
      des: '',
      toggle: true,
      cfgArray: []
    }
  },
  methods: {
  },
  watch: {
    property(v) {
      if (v) {
        this.currentComp = v.component
        this.pValue.pCfg = v
      }
    }
  },
  computed: {
    comp() {
      if (this.currentComp) {
        return require('../' + this.currentComp + '/index.vue').default
      }
    }
  },
  created() {},
  mounted() {}
}
</script>
